<template>
  <div
    class="music-button"
    :class="[
      props.musicBottomPosition === 'low' ? 'low' : null,
      isMusicOpen ? 'play' : 'pause',
    ]"
    @click="handleToggleMusic"
  >
    <img v-show="isMusicOpen" src="@/assets/img/common/music-on.png" alt="" />
    <img v-show="!isMusicOpen" src="@/assets/img/common/music-off.png" alt="" />

    <audio id="audio" autoplay ref="audio" loop>
      <source src="../../assets/music/bg.mp3" type="audio/mpeg" />
    </audio>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const props = withDefaults(
  defineProps<{ musicBottomPosition: "high" | "low" }>(),
  {
    musicBottomPosition: "high",
  }
);

const audio = ref(null);

const isMusicOpen = ref(true);

const handleToggleMusic = () => {
  isMusicOpen.value = !isMusicOpen.value;
  if (isMusicOpen.value) {
    audio.value.play();
  } else {
    audio.value.pause();
  }
};
</script>

<script lang="ts">
export default {
  name: "MusicButton",
};
</script>

<style lang="scss" scoped>
@keyframes infinity-rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.music-button {
  position: fixed;
  z-index: 999;
  top: 44px;
  right: 38px;
}
.play {
  animation: infinity-rotate 3s linear normal infinite;
}
.pause {
  animation: none;
}
.low {
  top: 145px;
}
img {
  height: 54px;
  width: 54px;
}
</style>
